<template>
  <section v-loading.fullscreen.lock="loading">
    <el-card class="margin-top">
      <div slot="header" class="clearfix relative">
        <el-row>
          <el-col
            :sm="24"
            :md="24"
            :lg="12"
            :xl="12"
            class="flex  align-center justify-start"
          >
            <span class="title-icon margin-right">仓租结算记录</span>
          </el-col>

          <el-col
            :sm="24"
            :md="24"
            :lg="12"
            :xl="12"
            class="flex  align-center justify-end"
          >
            <!-- verifyShow.returnInfoEdit -->
            <el-button
              v-if="isEdit"
              type="success"
              size="mini"
              @click="showTimeModal = true"
            >
              同步到应收
            </el-button>
          </el-col>
        </el-row>
      </div>

      <div>
        <hot-table
          ref="hotTable"
          :settings="hotSettings"
          :data="stockCostInfo"
        />
      </div>

      <div v-if="stockCostInfo.length == 0" class="padding text-center">
        暂无数据
      </div>
    </el-card>
    <el-dialog title="同步到应收" :visible.sync="showTimeModal" width="20%">
      <!-- <el-form :model="form" ref="timeForm">
        <el-form-item
          label=""
          prop="costTime"
          :rules="[
            {
              required: true,
              message: '日期不能为空',
              trigger: ['blur', 'change']
            }
          ]"
        >
          <el-date-picker
            size="mini"
            v-model="form.costTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
      </el-form> -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="enterClick">确 定</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import { HotTable } from "@handsontable/vue";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import { ajax } from "@/store/yg/common/utils";
import { checkRowsEmpty } from "@/utils";
import "handsontable/languages/zh-CN";
import globalData from "@/utils/config";

export default {
  name: "WarehouseRecord",
  components: {
    HotTable
  },
  props: {
    verifyShow: {
      type: Object,
      default: function() {
        return {};
      }
    },

    stockCostInfo: {
      type: Array,
      default: function() {
        return [];
      }
    },
    actionUrl: {
      type: String,
      default: ""
    },
    waybillId: {
      type: Number,
      default: 1
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      loading: false,
      autoHeight: "auto",
      uploadDialog: false,
      fbaCodeList: [],
      showTimeModal: false,
      form: {
        // costTime: ""
      }
    };
  },
  computed: {
    hotSettings() {
      return {
        rowHeaders: true, // 行表头
        stretchH: "all", // 所有列宽小于表宽时,填充满整个表 all（所有列填充）/last（最后一列）/none(不填充)
        licenseKey: globalData.licensekey,
        // 定义表结构
        colHeaders: [
          "",
          "公司",
          "费用名称",
          "数量",
          "单价",
          "币种",
          "仓库签收日期",
          "费用时间",
          "同步应收时间",
          "操作"
        ],
        width: "100%",
        height: "auto",

        columns: [
          {
            data: "isSelect",
            width: 50,
            type: "checkbox"
          },
          {
            data: "customerId",
            type: "text",
            readOnly: true
          },
          {
            data: "costName",
            readOnly: true,
            type: "text"
          },
          {
            data: "num",
            readOnly: true,
            type: "numeric"
          },
          {
            data: "price",
            readOnly: true,
            type: "text"
          },
          {
            data: "currency",
            readOnly: true,
            type: "text"
          },
          {
            data: "signTime",
            readOnly: true,
            type: "text"
          },
          {
            data: "costTime",
            readOnly: true,
            type: "text"
          },
          {
            data: "synchroTime",
            readOnly: true,
            type: "text"
          },
          {
            readOnly: true,
            // width: 100,
            renderer: this.coverRenderer
          }
        ],
        language: "zh-CN"
      };
    }
  },

  mounted() {
    // this.init();
    // console.log("this.shippingfbastockMap :>> ", this.shippingfbastockMap);
  },
  methods: {
    importInStockInfo() {
      const h = this.stockCostInfo.filter(x => checkRowsEmpty(x));
      if (h.length === 0) {
        this.$message.error("数据为空！");
        return;
      }
    },
    cancel() {
      this.showTimeModal = false;
      // this.form = {
      //   costTime: ""
      // };
    },
    enterClick() {
      this.syncToReceivable();
      // this.$refs.timeForm.validate(valid => {
      //   if (valid) {
      //     this.syncToReceivable();
      //   } else {
      //     console.log("error submit!!");
      //     return false;
      //   }
      // });
    },
    async syncToReceivable() {
      this.loading = true;
      this.form.waybillId = this.waybillId;
      const { code, message } = await ajax("synchroReceivable", this.form);
      if (code === 200) {
        this.$message.success("操作成功！");
      } else {
        this.$message.error(message || "操作失败！");
      }
      this.showTimeModal = false;
      this.loading = false;
    },
    coverRenderer(instance, td, row, col, prop, value, cellProperties) {
      td.innerHTML = ``; // 清空单元格子集

      let btnDel = document.createElement("i");

      btnDel.setAttribute(
        "class",
        "el-icon-remove-outline margin-right-sm text-red"
      );
      btnDel.setAttribute("v-loading.fullscreen.lock", "fullscreenLoading");
      btnDel.onclick = params => {
        // console.log("this :>> ", this);
        this.onDel(row);
      };
      // if (
      //   (this.templateType === "receivable" && this.verifyShow.deleteRece) ||
      //   (this.templateType === "payable" && this.verifyShow.deletePay)
      // ) {
      td.appendChild(btnDel); //添加按钮到单元格
      // }

      return td;
    },
    // 删除海外仓库存
    async onDel(row) {
      this.loading = true;
      const index = this.stockCostInfo.findIndex(x => x.id === row.id);
      const data = await ajax("deleteAbroadStockGoods", { id: row.id });
      if (data.code === 200) {
        this.$message.success("删除成功！");
        this.stockCostInfo.splice(index, 1);
      } else {
        this.$message.error(data.message || "删除失败！");
      }
      this.loading = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.relative {
  .absolute {
    right: 10px;
    top: -40%;
  }
}
</style>
<style scoped>
/deep/ .el-card__header {
  padding: 8px 20px;
}
</style>
